<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!-- justify-content属性定义了项目在主轴上的对齐方式。 -->
	<style>
		.contain {
			width: 800px;
			height: 500px;
			background-color: #FFF0F5;
			display: flex;
			justify-content: center;
			/* flex-start（默认值）：左对齐
				flex-end：右对齐
				center： 居中
				space-between：两端对齐，项目之间的间隔都相等。
				space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
		}
	</style>
</head>

<body>
	<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED;margin: 10px;">1</div>
		<div style="width: 200px; height: 100px; background-color: aqua;margin: 10px;">2</div>
		<div style="width: 300px; height: 100px; background-color: brown;margin: 10px;">3</div>
	</div>
</body>

</html>